<template>
  <div class="home">
    <!-- <div class="loading-mask" v-loading="loading"></div> -->
    <!-- <div class="box-top box-color">
      <div class="box-title">总览概况</div>
      <div class="echarts-main">
        <div class="echart-box" id="myChartBar"></div>
        <div class="echart-box" id="myChartLine"></div>
        <div class="echart-box" id="myChartPie"></div>
        <div class="echart-box" id="myChartLine1"></div>
        <div class="echart-box" id="myChartPie2"></div>
      </div>
    </div>-->
    <el-card class="box-construction" shadow="always">
      <div class="box-title clearfix">
        <div>项目里程碑</div>
        <!-- <div>
          <router-link :to="'project/milestone'">
            更多
            <i class="el-icon-d-arrow-right" />
          </router-link>
        </div>-->
        <Tips />
      </div>
      <ConstructionBox :listData="listDatas" />
    </el-card>
    <!-- <el-card class="box-construction" shadow="always">
      <div class="box-title clearfix">
        <div>发起评审项目</div>
        <Tips />
      </div>
      <div class="box-tabs">
        <span :class="{'active':tabActive===1}" @click="tabsHandle(1)">5天内</span>
        <span :class="{'active':tabActive===2}" @click="tabsHandle(2)">7天内</span>
        <span :class="{'active':tabActive===3}" @click="tabsHandle(3)">14天内</span>
      </div>
      <ConstructionBox :listData="listDatas" />
    </el-card> -->
    <!-- <el-card class="box-construction" shadow="always">
      <div class="box-title clearfix">
        <div>我的绩效</div>
      </div>
      <p>绩效系数：{{jx}}</p>
    </el-card>-->
  </div>
</template>

<script>
import Option from "@components/echarts-parts/echarts-option";
// import ConstructionBox from "../constructionBox/index";//原始list
import ConstructionBox from "../constructionBox/indexArrow"; //箭头list
import Tips from "../constructionBox/tips";
import { mapState } from "vuex";
import homeAPI from "@apis/home";
import { Loading } from 'element-ui'

const optionLoading = {
  lock: true, // 是否锁屏
  background: "rgba(255, 255, 255, 0.7)", // 背景颜色
  target: ".home",
  body: true
};
export default {
  data() {
    return {
      loading:false,
      uid: "", //用户id
      jx: 0.9, //绩效系数
      listDatas: [],
      tabActive: 1,
      datas1: {
        data: [
          { value: 135, name: "直接访问" },
          { value: 1548, name: "其他" }
        ],
        legend: ["直接访问", "其他"],
        color: ["#FEE449", "rgba(0,0,0,0.15)"]
      },
      datas2: {
        data: [
          { value: 135, name: "直接访问" },
          { value: 1548, name: "其他" }
        ],
        legend: ["直接访问", "其他"],
        color: ["#00FFA8", "rgba(0,0,0,0.15)"]
      },
      datas3: {
        data: [
          { value: 135, name: "视频广告" },
          { value: 1548, name: "其他" }
        ],
        legend: ["视频广告", "其他"],
        color: ["#FFE400", "rgba(0,0,0,0.15)"]
      },
      datas4: {
        data: [
          { value: 335, name: "直接访问" },
          { value: 310, name: "其他" }
        ],
        legend: ["直接访问", "其他"],
        color: ["#01A4F7", "rgba(0,0,0,0.15)"]
      }
    };
  },
  components: {
    ConstructionBox,
    Tips
  },
  computed: {
    ...mapState({
      userInfo: "auth"
    })
  },
  created() {
    if (this.userInfo.user.is_admin != 1) {
      this.uid = this.userInfo.user.id;
    } else {
      this.uid = "";
    }
    this.getList();
  },
  mounted() {
    // this.drawLine();
  },
  methods: {
    getList() {
      let loadingInstance = Loading.service(optionLoading);
      // this.loading = true;
      homeAPI
        .getHomeList(this.uid)
        .then(res => {
          this.listDatas = [...res.list];
          // console.log(res,"resHOme")
          loadingInstance.close();
          // this.loading = false;
        })
        .catch(err => {
          this.$message.error(err.message);
          loadingInstance.close();
          // this.loading = false;
        });
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      var myChartBar = this.$echarts.init(
        document.getElementById("myChartBar")
      );
      // 绘制图表
      myChartBar.setOption(Option.optionPie("测试1", this.datas1));

      var myChartLine = this.$echarts.init(
        document.getElementById("myChartLine")
      );
      // 绘制图表
      myChartLine.setOption(Option.optionPie("测试2", this.datas2));

      var myChartPie = this.$echarts.init(
        document.getElementById("myChartPie")
      );
      // 绘制图表
      myChartPie.setOption(Option.optionPie("测试3", this.datas3));

      var myChartLine = this.$echarts.init(
        document.getElementById("myChartLine1")
      );
      // 绘制图表
      myChartLine.setOption(Option.optionPie("测试2", this.datas4));

      var myChartPie = this.$echarts.init(
        document.getElementById("myChartPie2")
      );
      // 绘制图表
      myChartPie.setOption(Option.optionPie("测试3", this.datas4));
    },
    tabsHandle(data) {
      this.tabActive = data;
    }
  }
};
</script>

<style lang="scss" scoped>
.box-top {
  padding: 20px;
  .echarts-main {
    width: 100%;
    height: 200px;
    display: flex;

    .echart-box {
      flex: 1;
      display: inline-block;
    }
  }
}
.box-construction {
  // margin-top: 20px;
  min-height: 100px;
  .box-tabs {
    margin-top: 20px;
    background: #eef1f6;
    border: 1px solid #dcdfe6;
    span {
      display: inline-block;
      padding: 10px 20px;
      color: #909399;
      cursor: pointer;
      &.active {
        background: #fff;
        border-bottom: 1px solid transparent;
        margin-bottom: -1px;
        color: #409eff;
      }
      &:hover {
        color: #409eff;
      }
    }
  }
}
.box-title {
  div {
    float: left;
    &:nth-child(2),
    &:nth-child(3) {
      float: right;
    }
    &:nth-child(2) {
      font-size: 13px;
      color: rgba(0, 0, 0, 0.6);
      padding-left: 15px;
      cursor: pointer;
    }
  }
}
</style>